import React from 'react';
import { Menu } from 'antd';
import { NavLink} from 'react-router-dom';
import { BookOutlined, NotificationOutlined, TeamOutlined, FormOutlined, MessageOutlined, DesktopOutlined, ContainerOutlined, FileTextOutlined, MoneyCollectOutlined, SoundOutlined, BellOutlined, UserAddOutlined, ContactsOutlined } from '@ant-design/icons';
import './index.css'

const { SubMenu } = Menu;
const rootSubmenuKeys = ['sub1', 'sub2', 'sub3', 'sub4', 'sub5', 'sub6', 'sub7', 'sub8', 'sub9', 'sub10', 'sub11', 'sub12', 'sub13'];
const Silder = () => {
    const [openKeys, setOpenKeys] = React.useState(['sub1']);
    const onOpenChange = keys => {
        const latestOpenKey = keys.find(key => openKeys.indexOf(key) === -1);
        if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
            setOpenKeys(keys);
        } else {
            setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
        }
    };
    return (
        // 在这里使用navlink，格式如下<NavLink to="/login">文章类型</NavLink>
        <Menu className="menu-style" mode="inline" openKeys={openKeys} onOpenChange={onOpenChange} style={{ width: 240 }}>
            <SubMenu key="sub1" icon={<BookOutlined />} title="文章管理">
                <Menu.Item key="1">文章类型</Menu.Item>
                <Menu.Item key="2">文章内容管理</Menu.Item>
            </SubMenu>
            <SubMenu key="sub2" icon={<NotificationOutlined />} title="广告管理">
                <Menu.Item key="3">广告类型</Menu.Item>
                <Menu.Item key="4">广告内容管理</Menu.Item>
            </SubMenu>
            <SubMenu key="sub3" icon={<TeamOutlined />} title="残疾人管理">
                <Menu.Item key="5">残疾人管理</Menu.Item>
            </SubMenu>
            <SubMenu key="sub4" icon={<FormOutlined />} title="健康管理">
                <Menu.Item key="6">健康数据</Menu.Item>
                <Menu.Item key="7">评述管理</Menu.Item>
            </SubMenu>
            <SubMenu key="sub5" icon={<MessageOutlined />} title="消息系统">
                <Menu.Item key="8">消息管理</Menu.Item>
                <Menu.Item key="9">消息类型</Menu.Item>
            </SubMenu>
            <SubMenu key="sub6" icon={<DesktopOutlined />} title="应用服务管理">
                <Menu.Item key="10">应用服务管理</Menu.Item>
            </SubMenu>
            <SubMenu key="sub7" icon={<ContainerOutlined />} title="对账管理">
                <Menu.Item key="11">账单明细</Menu.Item>
            </SubMenu>
            <SubMenu key="sub8" icon={<FileTextOutlined />} title="订单管理">
                <Menu.Item key="12">订单列表</Menu.Item>
            </SubMenu>
            <SubMenu key="sub9" icon={<MoneyCollectOutlined />} title="退款管理">
                <Menu.Item key="13">退款介入</Menu.Item>
                <Menu.Item key="14">订单取消配置</Menu.Item>
            </SubMenu>
            <SubMenu key="sub10" icon={<SoundOutlined />} title="评价管理">
                <Menu.Item key="15">评价列表</Menu.Item>
                <Menu.Item key="16">评价配置</Menu.Item>
            </SubMenu>
            <SubMenu key="sub11" icon={<BellOutlined />} title="预案管理">
                <Menu.Item key="19">预案列表</Menu.Item>
                <Menu.Item key="20">预案归属</Menu.Item>
                <Menu.Item key="21">预案类型</Menu.Item>
                <Menu.Item key="22">事故类型</Menu.Item>
            </SubMenu>
            <SubMenu key="sub12" icon={<UserAddOutlined />} title="陪护员管理">
                <Menu.Item key="23">陪护员列表</Menu.Item>
            </SubMenu>
            <SubMenu key="sub13" icon={<ContactsOutlined />} title="系统管理">
                <Menu.Item key="24">用户管理</Menu.Item>
                <Menu.Item key="25">企业管理</Menu.Item>
                <Menu.Item key="26">部门管理</Menu.Item>
                <Menu.Item key="27">角色管理</Menu.Item>
            </SubMenu>
        </Menu>
    );
}

export default Silder;

